<template>
  <view class="u-page">
	  <u-toast ref="uToast"></u-toast>
	  
	  <u-row :gutter="20">
	  	<recursive-comment :comments="commentData"></recursive-comment>
	    </u-row>
	  <u-row :gutter="20" style="margin-top: 5%;" >
	  		  <u-col :span="6">
	  			<u-button type="success" @click="reply">评论</u-button>
	  		  </u-col>
	  		  <u-col :span="6">
	  			<u-button icon="arrow-left" text="返回" plain @click="goBack()"></u-button>
	  		  </u-col>
	  </u-row>
    
      
	
	
	<u-modal :show="show"  :title="title"
	 confirmText="评论"
	 @confirm="confirm" @cancel="cancel" :showCancelButton="true">
				<view class="slot-content" style="width: 100%;">
					<u--textarea v-model="form.content" maxlength="-1" count autoHeight placeholder="说点什么吧~" confirm-type="send"></u--textarea>
				</view>
			</u-modal>
  </view>
</template>
 
<script>
import RecursiveComment from '@/components/RecursiveComment/RecursiveComment.vue';

import * as communityApi from "@/api/business/community"
 
export default {
  components: {
    RecursiveComment
  },
  data() {
    return {
		id: undefined,
      commentData: [],
	  show: false,
	  title: '评论',
	  form: {
	  	parentId: 0,
	  	content: undefined,
	  	releaseTime: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
	  }
    }
  },
  mounted() {
      const app = this;
      uni.$on('update', function(data) {
		  app.loadData(app.id)
      })
  },    
  //为了优化代码，可以加上移除事件，避免重复监听事件
  onUnload() {
      // 移除监听事件  
      uni.$off('update');
  },
  onLoad(params) {
	  if(params.id != undefined){
		  this.id = params.id
		this.loadData(params.id)
	  }
  },
  methods: {
	  load(){
		  this.$refs.uReadMore.init();
	  },
	loadData(id){
		communityApi.getCommunityTree(id).then(res => {
			this.commentData = res.data;
		})
	},
	reply(){
		
		if(this.id != undefined){
			this.form.parentId = this.id
			this.show = true;
		}else{
			this.$refs.uToast.show({
				type: 'error',
				icon: false,
				title: '失败主题',
				message: "无法获取评论信息",
				iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
			})
		}
	},
	confirm(){
		communityApi.communityAdd(this.form).then(res => {
			this.loadData(this.id)
			this.show = false;
		})
	},
	cancel(){
		this.show = false;
	},
	goBack () {
		uni.navigateBack({
		    delta: 1, // 返回层数，2则上上页
		    success() {
		        uni.$emit('update',{msg:'页面更新'})
		    }
		})		
	},
  }
}
</script>
<style>
	.u-page {
		padding: 2px;
	}
</style>